<template>
  <div class="main">
    <span class="welcome">欢迎使用Tbill多人记账！</span>
        <el-row class="bill-wrapper">
      <countBill></countBill>
    </el-row>
    <el-row class="nowDate-wrapper">
      <el-row class="nowDate-row">
        <el-col :span="8" :push="2">
          <span class="nowDate-col-title">Year</span>
          <el-progress
            class="nowDate-col-progress"
            :text-inside="true"
            :stroke-width="36"
            :percentage="
              divide(dayjs().dayOfYear(), dayjs().endOf('year').dayOfYear())
                | toPercent(0)
            "
          ></el-progress>
          <span class="nowDate-col-tip"
            >{{ dayjs().year() }}年已过去了{{ dayjs().dayOfYear() }}天</span
          >
        </el-col>
        <el-col :span="8" :push="6">
          <span class="nowDate-col-title">Month</span>
          <el-progress
            class="nowDate-col-progress"
            :text-inside="true"
            :stroke-width="36"
            :percentage="
              divide(dayjs().date(), dayjs().endOf('month').date())
                | toPercent(0)
            "
          ></el-progress>
          <span class="nowDate-col-tip"
            >{{ dayjs().month() + 1 }}月已经过去了{{ dayjs().date() }}天</span
          >
        </el-col>
      </el-row>
      <el-row class="nowDate-row">
        <el-col :span="8" :push="2">
          <span class="nowDate-col-title">Week</span>
          <el-progress
            class="nowDate-col-progress"
            :text-inside="true"
            :stroke-width="36"
            :percentage="divide(dayjs().isoWeekday(), 7) | toPercent(0)"
          ></el-progress>
          <span class="nowDate-col-tip"
            >这一周已经过去了{{ dayjs().isoWeekday() }}天</span
          >
        </el-col>
        <el-col :span="8" :push="6">
          <span class="nowDate-col-title">Day</span>
          <el-progress
            class="nowDate-col-progress"
            :text-inside="true"
            :stroke-width="36"
            :percentage="divide(dayjs().hour(), 24) | toPercent(0)"
          ></el-progress>
          <span class="nowDate-col-tip"
            >今天剩下{{ 24 - dayjs().hour() }}小时</span
          >
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import CountBill from "@/components/CountBill/index";
export default {
  components: {
    CountBill,
  },
  computed: {
    divide() {
      return (val1, val2) => {
        return parseInt(val1) / parseInt(val2);
      };
    },
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
  },
};
</script>
<style scoped lang="scss">
.welcome {
  font-size: 24px;
  position: relative;
  top: 20px;
  left: 30px;
}
.nowDate-wrapper {
  margin-top: 60px;
  padding: 30px;
  background: white;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  .nowDate-row {
    margin-top: 20px;
    .nowDate-col-title {
      font-size: 18px;
      color: #666;
      font-weight: bold;
    }
    .nowDate-col-progress {
      margin: 10px auto 5px;
    }
    .nowDate-col-tip {
      font-size: 13px;
    }
  }
}
.bill-wrapper {
  background: white;
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}
</style>